<template>
  <div class="search" style="display: flex">
    <Card style="width: 100%">
      <div>
        <Row @keydown.enter.native="handleSearch">
          <Form
            ref="searchForm"
            :model="searchForm"
            inline
            :label-width="70"
            class="search-form"
          >
            <Form-item label="联系方式" prop="mobile">
              <Input
                type="text"
                v-model="searchForm.mobile"
                placeholder="请输入会员联系方式"
                clearable
                style="width: 200px"
              />
            </Form-item>
            <Form-item label="区域" prop="name">
              <regionArea
                style="width: 350px"
                @selected="selectedRegions"
                :showIs="true"
              />
            </Form-item>
            <Button
              @click="handleSearch"
              class="search-btn"
              type="primary"
              icon="ios-search"
              >搜索</Button
            >
          </Form>
        </Row>

        <Table
          :loading="loading"
          border
          :columns="columns"
          class="mt_10"
          :data="data"
          ref="table"
          @on-select="selectionChange"
        ></Table>
        <Row type="flex" justify="end" class="mt_10">
          <Page
            :current="searchForm.pageNumber"
            :total="total"
            :page-size="searchForm.pageSize"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50, 100]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as RegExp from "@/libs/RegExp.js";
import regionArea from "@/views/agent-manage/region";
import bindMemberModal from "@/views/partner-manager/components/bindMember";

export default {
  name: "unBindMemberList",
  components: {
    region,
    regionArea,
    ossManage,
    bindMemberModal,
  },
  data() {
    return {
      descFlag: false, //编辑查看框
      loading: true, // 表单加载状态
      addFlag: false, // modal显隐控制
      updateRegion: false, // 地区
      selectDate: null, // 选择时间段
      data: [],
      total: 0,
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        username: "",
        mobile: "", //联系方式
        disabled: "OPEN",
        type: "2", //用户类型
        region: "",
        regionId: "", //区域
        startDate: "", //下单使劲按
        endDate: "",
        level: "", //会员等级
      },
      selectMember: [], //保存选中的用户
      columns: [
        {
          title: "序号",
          type: "index",
          width: 80,
          align: "center",
        },
        {
          title: "姓名",
          key: "username",
          width: "150",
          tooltip: true,
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: "150",
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeName",
          width: "150",
          render: (h, params) => {
            if (params.row.gradeName == "0") {
              return h("div", {}, "游客");
            } else if (params.row.gradeName == "1") {
              return h("div", {}, "银卡");
            } else if (params.row.gradeName == "2") {
              return h("div", {}, "金卡");
            } else if (params.row.gradeName == "9999") {
              return h("div", {}, "会员商家");
            }
          },
        },
        {
          title: "区域",
          key: "locationName",
          width: "300",
          tooltip: true,
        }
      ],
      choseIds: [], //选择的id
      choseDataList: [], //选中的会员数据
    };
  },
  props: {},
  watch: {},
  methods: {
   
    //选中
    selectionChange(val, row) {
      this.choseDataList.push(row);
      this.choseIds = val.map((item) => item.id);
      console.log(this.choseIds,val,'*/*/*/*/*/*')
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    // 选中的地址
    selectedRegions(val) {
      this.searchForm.regionId = val[0];
    },
    // 绑定会员
    bindMember(val) {
      this.bindModal = true;
    },

    // 初始化信息
    init(data) {
      data.forEach((item) => {
        if (this.choseDataList.findIndex((d) => d.id === item.id) >= 0) {
          this.$set(item, "_checked", true);
        } else {
          this.$set(item, "_checked", false);
        }
      });
      this.data = data;
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },

    //查询会员列表
    getData() {
      if (this.searchForm.regionId) {
        this.searchForm.regionId = this.searchForm.regionId.toString();
      }

      API_Member.getMemberListData(this.searchForm).then((res) => {
        if (res.result.records) {
          this.loading = false;
          this.init(res.result.records);
          this.total = res.result.total;
        }
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}

.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.choseDataBox {
  width: 100%;
  height: auto;
  .choseDataList {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
    padding: 5px 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .datalistLeft {
      width:100%;
      display: flex;
      align-items: center;
      p {
        margin-right: 20px;
      }
      .datalistName{
        width: 50px;
      }
    }
    img {
      width: 21px;
      height: 21px;
      cursor: pointer;
    }
  }
}
</style>
